<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Margin</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
    <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
</head>

<body>
    <h1>Margin</h1>
<!--
    <div>All of the <em>After</em> elements have the following properties:
        <br />
        <code>
            margin-top:10px; <br />
            margin-bottom:0; <br />
            margin-left:30px; <br />
            margin-right:10px;
        </code>
    </div>
-->

    <div id="before_id">
        <h2>Before</h2>
        <div class="parent">
            <span class="static_inline_shrinkwrapped box">Static Inline Shrinkwrapped <br />Element</span>

            <div class="spacer" ></div>

            <img class="replaced_inline_shrinkwrapped box" src="star.gif" alt="" />
            <img class="replaced_inline_sized box" src="star.gif" alt="" />
            <span class="sized">
                <img class="replaced_inline_stretched box" src="star.gif" alt="" />
            </span>

            <div class="spacer"></div>

            <div class="static_block_sized box">Static Block Sized</div>
            <div class="static_block_stretched box" >Static Block Stretched Auto</div>

            <div class="spacer"></div>

            <table class="table_shrinkwrapped box"    ><tr><td>Table Shrinkwrapped</td></tr></table>
            <table class="table_sized box"            ><tr><td>Table Sized</td></tr></table>
            <table class="table_stretched box"        ><tr><td>Table Stretched 100%</td></tr></table>

            <div class="spacer"></div>

            <span class="float_shrinkwrapped box"    >Float Shrinkwrapped</span>
            <span class="float_sized box"            >Float Sized</span>
            <span class="float_stretched box"        >Float Stretched 100%</span>

            <span class="absolute_shrinkwrapped box" >Absolute Shrinkwrapped</span>
            <span class="absolute_sized box"         >Absolute Sized</span>
            <span class="absolute_stretched box"     >Absolute Stretched Auto</span>
        </div>
    </div>

    <!-- Identical code to the previous with the addition of the after class -->

    <div id="after_id">
        <h2>After</h2>
        <div class="parent">
            <span class="static_inline_shrinkwrapped box after" >Static Inline Shrinkwrapped <br />Element </span>

            <div class="spacer" ></div>

            <img class="replaced_inline_shrinkwrapped box after" src="star.gif" alt="" />
            <img class="replaced_inline_sized box after" src="star.gif" alt="" />
            <span class="sized">
                <img class="replaced_inline_stretched box after" src="star.gif" alt="" />
            </span>

            <div class="spacer" ></div>

            <div class="static_block_sized box after"     >Static Block Sized</div>
            <div class="static_block_stretched box after" >Static Block Stretched Auto</div>

            <div class="spacer" ></div>

            <table class="table_shrinkwrapped box after"    ><tr><td class="1after" >Table Shrinkwrapped</td></tr></table>
            <table class="table_sized box after"            ><tr><td class="1after" >Table Sized</td></tr></table>
            <table class="table_stretched box after"        ><tr><td class="1after" >Table Stretched 100%</td></tr></table>

            <div class="spacer" ></div>

            <span class="float_shrinkwrapped box after"    >Float Shrinkwrapped</span>
            <span class="float_sized box after"            >Float Sized</span>
            <span class="float_stretched box after"        >Float Stretched 100%</span>

            <span class="absolute_shrinkwrapped box after" >Absolute Shrinkwrapped</span>
            <span class="absolute_sized box after"         >Absolute Sized</span>
            <span class="absolute_stretched box after"     >Absolute Stretched Auto</span>
        </div>
    </div>
</body>
</html>
